<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PagTools :show-before="true">
        <template #before><span slot="before">{{ total }}条数据</span></template>
        <template #after>
          <el-button v-if="showperm($store.state.user.userInfo.roles?$store.state.user.userInfo.roles.points:[])" size="mini" type="warning" @click="$router.push('/import')">导入</el-button>
          <el-button size="mini" type="danger" @click="exportExcel">导出</el-button>
          <el-button size="mini" type="primary" @click="showDialog=true">新增员工</el-button>
        </template>
      </PagTools>
      <el-card>
        <el-table border :data="userList">
          <el-table-column label="序号" type="index" sortable="" />
          <el-table-column label="头像" sortable="" width="200">
            <template #default="{row}">
              <img v-imgerr="require('@/assets/common/tutu.jpg')" :src="row.staffPhoto" alt="" class="staffPhoto" @click="isShowqrcode(row.staffPhoto)">
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username" sortable="" />
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <el-table-column label="聘用形式" prop="formOfEmployment" :formatter="formatterEmployment" sortable="" />
          <el-table-column label="入职时间" sortable="">
            <template #default="{row}">{{ row. timeOfEntry|formatDate }}</template>
          </el-table-column>
          <el-table-column label="账户状态" prop="enableState" sortable="">
            <template #default="{row}">
              <el-switch
                v-model="row.enableState"
                :active-value="1"
                :inactive-value="2"
                :disabled="true"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{row}">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="assignRole(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination layout="prev, pager, next" :total="total" :page-size="Query.size" @current-change="currentChange" />
        </el-row>
      </el-card>
      <AddEmplioyess :show-dialog="showDialog" />
    </div>
    <el-dialog title="头像二维码" :visible="isShowcode" @close="isShowcode=false">
      <canvas ref="qrcode" />
    </el-dialog>
    <Assign ref="getRole" :show-role="showRole" />
  </div>
</template>

<script>
import Assign from './components/assign-role.vue'
import { getUserList, delEmployeeApi } from '@/api/user'
import employees from '@/api/constant/employees'
import { export_json_to_excel } from '@/vendor/Excel'
import { formatDate } from '@/filters'
import AddEmplioyess from './components/add-emplioyess.vue'
import Qrcode from 'qrcode'
// import mixin from '@/mixin'
export default {
  components: {
    AddEmplioyess,
    Assign
  },
  // mixins: [mixin],
  data() {
    return {
      Query: {
        page: 1, // 页码
        size: 5 // 每一页的条数
      },
      total: 0, // 总条数
      userList: [], // 员工列表
      showDialog: false,
      isShowcode: false,
      showRole: false
    }
  },

  async created() {
  // 调用请求函数
    this.getUserList()
  },
  methods: {

    // 分配角色
    async assignRole(id) {
      // 调用子组件的函数进行数据回显
      await this.$refs.getRole.getRoleList(id)
      // 显示弹窗
      this.showRole = true
    },
    // 点击头像显示二维码
    isShowqrcode(url) {
      // 头像是否存在
      if (url) {
        // 显示弹窗
        this.isShowcode = true
        // 完全捕获到标签才生成二维码
        this.$nextTick(() => {
          // qrcode.toCanvas('需要操作的标签','生成的二维码的字符串')
          Qrcode.toCanvas(this.$refs.qrcode, url)
        })
      }
    },
    // 删除员工
    async  delEmployee(id) {
      // 二次提醒用户
      await this.$confirm('是否删除')
      // 发送删除请求
      await delEmployeeApi(id)
      // 提示用户删除成功
      this.$message.success('删除成功')
      // 更新页面
      this.getUserList()
    },
    // 封装请求员工列表
    async  getUserList() {
      // 解构
      const { rows, total } = await getUserList(this.Query)
      // 保存总条数
      this.total = total

      // console.log(66, rows)
      // 保存员工数据
      this.userList = rows
    },
    // 分页
    currentChange(newpage) {
      // 点击的当前页
      this.Query.page = newpage
      // 调用请求函数
      this.getUserList()
    },
    // 格式化聘用形式
    formatterEmployment(row, col, cell, index) {
      // find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。(对象)
      const obj = employees.hireType.find(item => item.id === cell)
      return obj ? obj.value : '未知形式'
    },
    // 导出
    async exportExcel() {
      const { rows } = await getUserList({
        page: 1,
        size: this.total
      })
      // const header = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']
      // console.log(100, rows)
      // 改造数据
      const data = rows.map(user => {
        // 封装一个函数
        return this.coverage(user)
      })
      // 表头格式
      const header = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']
      // console.log(107, data)
      // 导出Excel表请求
      export_json_to_excel({
        header, // 要求是数组
        data // 要求是数组包数组

      })
    },
    // 封装改造数组的函数
    // 传入一个对象user
    coverage(user) {
      // 定义一个新数组
      const newuser = []
      // 表头格式
      const header = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']
      // 字典
      const headers = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 表头遍历
      header.forEach(item => {
        // 新的属性名
        const key = headers[item]
        // 新的属性值
        const value = user[key]
        // 判断是否等于聘用形式
        if (key === 'formOfEmployment') {
          const obj = employees.hireType.find(item => item.id === user[key])
          newuser.push(obj ? obj.value : '未知形式')
        } else if (key === 'timeOfEntry' || key === 'correctionTime') {
          newuser.push(formatDate(user[key]))
        } else { newuser.push(value) }
      })
      // 返回数组回去
      return newuser
    }
  }
}
</script>

<style lang="scss" scoped>
.staffPhoto{
 width: 180px;
  height: 120px;
  object-fit: cover;
}
::v-deep .el-dialog__body{
  text-align: center;
}
</style>
